<template>
	<u-popup v-model="pay" mode="center" @close='close'>
		<view class="pay">
			<view class="title">请输入支付密码</view>
			<view class="content">
				<u-message-input :maxlength="6" :value="password" :dot-fill='true' @change='change'></u-message-input>
			</view>
			<view class="btn" @click="btn">确定</view>
		</view>
	</u-popup>
</template>

<script>
	export default {
		data(){
			return {
				//控制弹窗
				pay:false,
				//支付密码
				password:'',
				// 需要用到的数据
				obj:{}
			}
		},
		mounted() {
		},
		watch: {
			payShow: {
				handler(newval, oldVal) {
					this.pay = this.payShow;
				},
				immediate: true
			}
		},
		methods:{
			//弹窗关闭
			close(){
				this.password = "";
				this.pay = false;
				// this.$emit('close')
			},
			open(type, next_id, current_id){
				this.obj = {
					type, next_id, current_id
				}
				this.pay = true;
			},
			//输入密码回调
			change(e){
				this.password = e;
			},
			//点击确定
			btn(){
				
				this.$emit('changeCode',{
					handle_pass:this.password,
					...this.obj
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.pay{
		min-height: 200rpx;
		width: 660rpx;
		background: #fff;
		border-radius: 10rpx;
		padding: 30rpx;
		.title{
			font-size: 30rpx;
			text-align: center;
			margin-bottom: 30rpx;
		}
		.content{
			display: flex;
			align-items: center;
			justify-content: center;
			margin-bottom: 30rpx;
		}
		.btn{
			width: 100%;
			height: 80rpx;
			color: #fff;
			background: rgba(32, 32, 44, 0.8);
			border-radius: 10rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 30rpx;
		}
	}
</style>